<script setup lang="js">
import {ref } from 'vue'
import MoreCategoryCard from '../modals/MoreCategoryCard.vue'
// 中间分类栏
const allTags = ref([
  '番剧', '国创', '综艺', '动画', '鬼畜', '舞蹈', '娱乐', '科技数码', '美食', '汽车', '体育运动',
  '电影', '电视剧', '纪录片', '游戏', '音乐', '影视', '知识', '资讯', '小剧场', '时尚美妆',
])


</script>
<template>
   <div class="header-channel-container"> 
    <div class="header-channel">
    <!-- 左侧icon按钮组 -->
    <div class="channel-icons">
      <div class="icon-box">
        <a><img src="/动态.png"></a>
        <span>动态</span>
      </div>
      <div class="icon-box">
        <a><img src="/热门.png"></a>
        <span>热门</span>
      </div>
    </div>
    <!-- 中间分类 -->
    <div class="nav-center" ref="containerRef">
        <div
          v-for="(tag, index) in allTags"
         :key="tag"
         ref="tagRefs"
        class="nav-center-item"
        >{{ tag }}</div>
        <el-popover 
        placement="bottom-end" 
        trigger="hover" 
        :show-arrow="false"  
        width="25vw"  
        :popper-style="{
          borderRadius: '8px',
        }">
        <template #reference>
        <div class="nav-center-item" id="targetTag" >
          <span>更多</span>
          <span class="icon-arrow"><</span>
        </div>
        </template>
        <more-category-card ></more-category-card>
      </el-popover>
     </div>
     
     <!-- 右侧分类栏 -->
     <div class="nav-right">
        <div class="nav-right-item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="23" height="23" class="side-icon"><!--[--><path d="M0 0L24 0L24 24L0 24L0 0z" fill="#F7F7F703"></path><path d="M18 4.8L6 4.8C5.33726 4.8 4.8 5.33726 4.8 6L4.8 18C4.8 18.66276 5.33726 19.2 6 19.2L18 19.2C18.66276 19.2 19.2 18.66276 19.2 18L19.2 6C19.2 5.33726 18.66276 4.8 18 4.8z" fill="#61666Dff"></path><path d="M4 5.99998C4 4.89541 4.89544 3.99997 6 3.99997L18 3.99997C19.1046 3.99997 20.00004 4.89541 20.00004 5.99998L20.00004 18C20.00004 19.1046 19.1046 19.99992 18 19.99992L6 19.99992C4.89544 19.99992 4 19.1046 4 18L4 5.99998zM6 5.59998C5.77909 5.59998 5.6 5.77907 5.6 5.99998L5.6 18C5.6 18.22092 5.77908 18.39996 6 18.39996L18 18.39996C18.22092 18.39996 18.39996 18.22092 18.39996 18L18.39996 5.99998C18.39996 5.77906 18.22092 5.59998 18 5.59998L6 5.59998z" fill="#61666Dff"></path><path d="M15.99996 11.19931L8 11.19931C7.55818 11.19931 7.2 11.55749 7.2 11.99932C7.2 12.44112 7.55818 12.79932 8 12.79932L15.99996 12.79932C16.4418 12.79932 16.8 12.44112 16.8 11.99932C16.8 11.55749 16.4418 11.19931 15.99996 11.19931z" fill="#ffffffff"></path><path d="M15.99996 8.00062L8 8.00062C7.55818 8.00062 7.2 8.35878 7.2 8.80061C7.2 9.24244 7.55818 9.60061 8 9.60061L15.99996 9.60061C16.4418 9.60061 16.8 9.24244 16.8 8.80061C16.8 8.35878 16.4418 8.00062 15.99996 8.00062z" fill="#ffffffff"></path><path d="M11.2 14.4L8 14.4C7.55818 14.4 7.2 14.7582 7.2 15.20004C7.2 15.64188 7.55818 15.99996 8 15.99996L11.2 15.99996C11.64182 15.99996 12 15.64188 12 15.20004C12 14.7582 11.64182 14.4 11.2 14.4z" fill="#ffffffff"></path><!--]--></svg>
          <span>专栏</span>
        </div>
        <div class="nav-right-item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="23" height="23" class="side-icon"><!--[--><path d="M0.89371 0.57143L23.75086 0.57143L23.75086 23.42857L0.89371 23.42857L0.89371 0.57143z" fill="#F7F7F703"></path><path d="M4.70841 5.19295C5.2937 5.03613 5.8953 5.38346 6.05213 5.96874L9.42514 18.55703C9.58198 19.14229 9.23464 19.74389 8.64935 19.90069C8.06406 20.0576 7.46246 19.71029 7.30563 19.12491L3.93262 6.53667C3.77578 5.95138 4.12312 5.34978 4.70841 5.19295z" fill="#61666Dff"></path><path d="M5.27351 7.30093L10.54989 5.88712L13.46914 6.22925L16.10731 5.52234C16.52366 5.4108 16.94503 5.63347 17.04846 6.01973L18.99543 12.34011C19.09886 12.7264 18.84526 13.12994 18.42903 13.24149L15.79086 13.94834L12.87154 13.60629L7.59518 15.02011L5.27351 7.30093z" fill="#61666Dff"></path><path d="M4.63459 6.94483C4.7309 6.77202 4.89311 6.64559 5.08421 6.59439L10.36057 5.18058C10.44997 5.15663 10.5431 5.14986 10.63502 5.16063L13.4152 5.48645L15.91806 4.81581C16.66903 4.61457 17.5232 5.00021 17.75086 5.81514L19.6944 12.1248C19.69703 12.13349 19.69954 12.14206 19.70183 12.15086C19.92309 12.97623 19.37406 13.74549 18.61829 13.948L15.98011 14.65486C15.89074 14.67886 15.7976 14.6856 15.70571 14.67486L12.92549 14.34903L7.78448 15.72651C7.40264 15.8288 7.00859 15.60926 6.89474 15.23074L4.57307 7.51155C4.51609 7.3221 4.53829 7.11765 4.63459 6.94483zM6.19111 7.81225L8.09123 14.12983L12.68229 12.89977C12.77166 12.87577 12.8648 12.86903 12.95669 12.87977L15.7368 13.2056L18.23966 12.53497C18.26217 12.52891 18.27554 12.51874 18.28274 12.51109L16.34949 6.23501C16.3488 6.23285 16.34811 6.23067 16.34754 6.22849C16.33783 6.2252 16.32046 6.22243 16.29669 6.22882L13.65851 6.93571C13.56903 6.95967 13.47589 6.96645 13.384 6.95567L10.60387 6.62985L6.19111 7.81225z" fill="#61666Dff"></path><!--]--></svg>
          <span>活动</span>
        </div>
        <div class="nav-right-item">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="23" height="23" class="side-icon"><!--[--><path d="M19.11943 4.38093L8.53291 4.38093C8.11213 4.38093 7.77102 4.72205 7.77102 5.14283L7.77102 8.67166L7.77928 8.78424C7.83369 9.15165 8.15038 9.43355 8.53291 9.43355L8.65256 9.43312L11.26813 9.32185L11.27639 9.43445C11.33081 9.80184 11.64754 10.08376 12.03006 10.08376L12.18743 12.96229L13.28743 14.06251L13.38183 14.14286C13.67954 14.35714 14.09714 14.33029 14.36491 14.06251L15.464 12.96229L19.11943 12.9624C19.54023 12.9624 19.88137 12.62126 19.88137 12.20046L19.88137 5.14283C19.88137 4.72205 19.54023 4.38093 19.11943 4.38093zM18.35657 5.90398L18.35657 11.43769L15.14949 11.43857L15.0296 11.44807C14.87189 11.47319 14.72503 11.54742 14.61074 11.66173L13.82629 12.44571L13.0416 11.66173L12.95006 11.58366C12.8208 11.48994 12.66446 11.43857 12.50286 11.43857L12.79086 8.55906L10.17703 8.67166L10.16877 8.55906C10.11434 8.19167 9.79766 7.90975 9.41512 7.90975L9.2937 7.90969L9.2937 5.90398L18.35657 5.90398z" fill="#61666Dff"></path><path d="M16.07166 7.42781C16.45417 7.42781 16.77086 7.70971 16.82526 8.07712L16.8336 8.1897L16.8336 17.33257C16.8336 17.71509 16.55166 18.03177 16.18423 18.08617L16.07166 18.0944L9.0857 18.09406L6.24303 20.22777C5.80353 20.55737 5.19983 20.32423 5.05576 19.84011L5.03216 19.73269L5.02398 19.61829L5.02285 18.09406L3.88113 18.0944C3.53685 18.0944 3.24591 17.86606 3.15149 17.55257L3.12749 17.44514L3.11922 17.33257L3.11922 8.1897C3.11922 7.80718 3.40114 7.49048 3.76854 7.43607L3.88113 7.42781L16.07166 7.42781zM8.45256 13.52377L6.16685 13.52377L6.05425 13.532C5.68686 13.58651 5.40494 13.9032 5.40494 14.28571C5.40494 14.70651 5.74606 15.04754 6.16685 15.04754L8.45256 15.04754L8.56514 15.03931C8.93255 14.98491 9.21446 14.66823 9.21446 14.28571C9.21446 13.86491 8.87335 13.52377 8.45256 13.52377zM10.73827 10.4769L6.16685 10.4769L6.05425 10.48517C5.68686 10.53958 5.40494 10.85627 5.40494 11.2388C5.40494 11.65959 5.74606 12.00069 6.16685 12.00069L10.73827 12.00069L10.85086 11.99245C11.21826 11.93802 11.50023 11.62134 11.50023 11.2388C11.50023 10.81801 11.15906 10.4769 10.73827 10.4769z" fill="#61666Dff"></path><!--]--></svg>
         <span>社区中心</span>
        </div>
        <div class="nav-right-item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="23" height="23" class="side-icon"><!--[--><path d="M0 0L24 0L24 24L0 24L0 0z" fill="#F7F7F703"></path><path d="M3.99984 6.40068C3.99984 5.95885 4.35802 5.60069 4.79984 5.60069L15.99984 5.60069C16.44168 5.60069 16.79988 5.95885 16.79988 6.40068L16.79988 10.00068L19.9998 7.60068L19.9998 16.80072L16.79988 14.40072L16.79988 17.60064C16.79988 18.04248 16.44168 18.40068 15.99984 18.40068L4.79984 18.40068C4.35802 18.40068 3.99984 18.04248 3.99984 17.60064L3.99984 6.40068z" fill="#61666Dff"></path><path d="M3.19985 6.40066C3.19985 5.517 3.91619 4.80066 4.79984 4.80066L15.99984 4.80066C16.88352 4.80066 17.5998 5.51701 17.5998 6.40066L17.5998 8.40066L19.5198 6.96066C19.7622 6.77885 20.08656 6.7496 20.35764 6.88512C20.6286 7.02064 20.79984 7.29764 20.79984 7.60066L20.79984 16.8006C20.79984 17.10372 20.6286 17.38068 20.35764 17.51616C20.08656 17.65176 19.7622 17.62248 19.5198 17.44068L17.5998 16.00068L17.5998 17.60064C17.5998 18.48432 16.88352 19.2006 15.99984 19.2006L4.79984 19.2006C3.9162 19.2006 3.19985 18.48432 3.19985 17.60064L3.19985 6.40066zM15.99984 6.40066L4.79984 6.40066L4.79984 17.60064L15.99984 17.60064L15.99984 14.4006C15.99984 14.0976 16.17108 13.82064 16.44204 13.68516C16.71312 13.54956 17.03748 13.57884 17.27988 13.76064L19.19988 15.20064L19.19988 9.20066L17.27988 10.64066C17.03748 10.82246 16.71312 10.85172 16.44204 10.7162C16.17108 10.58069 15.99984 10.30368 15.99984 10.00066L15.99984 6.40066z" fill="#61666Dff"></path><path d="M12.63456 12.93084L9.47683 15.03612C9.10921 15.28116 8.61252 15.1818 8.36743 14.81424C8.27982 14.68272 8.23307 14.5284 8.23307 14.37048L8.23307 10.16006C8.23307 9.71824 8.59124 9.36006 9.03307 9.36006C9.19102 9.36006 9.34542 9.40681 9.47683 9.49442L12.63456 11.59961C13.00224 11.84468 13.1016 12.3414 12.85644 12.70896C12.79788 12.79692 12.72252 12.87228 12.63456 12.93084z" fill="#ffffffff"></path><!--]--></svg>
          <span>直播</span>
        </div>
        <div class="nav-right-item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="23" height="23" class="side-icon"><!--[--><path d="M19.33943 4.80001L16.25371 4.80001C14.42514 4.80001 13.39657 5.94287 12.82514 6.85715C12.71086 7.08573 12.25371 7.08573 12.13943 6.85715C11.68229 6.05715 10.65371 4.80001 8.71086 4.80001L5.62514 4.80001C4.82514 4.80001 4.13943 5.48573 4.13943 6.28573L4.13943 16C4.13943 16.8 4.82514 17.48571 5.62514 17.48571L8.71086 17.48571C10.53943 17.48571 11.568 18.74286 12.13943 19.54286C12.25371 19.77143 12.71086 19.77143 12.82514 19.54286C13.28229 18.74286 14.31086 17.48571 16.25371 17.48571L19.33943 17.48571C20.13943 17.48571 20.82514 16.8 20.82514 16L20.82514 6.17144C20.82514 5.37144 20.25371 4.80001 19.33943 4.80001zM11.568 12.57143L10.31086 14.85714L9.05371 12.57143L6.768 11.3143L9.05371 10.05715L10.31086 7.77144L11.568 10.05715L13.85371 11.3143L11.568 12.57143zM16.368 14.28571L15.68229 15.54286L14.88229 14.28571L13.62514 13.6L14.88229 12.91429L15.568 11.65715L16.25371 12.91429L17.51086 13.6L16.368 14.28571z" fill="#61666Dff"></path><!--]--></svg>
          <span>课堂</span>
        </div>
        <div class="nav-right-item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="23" height="23" class="side-icon"><!--[--><path d="M18.16229 5.52378C19.36731 5.52378 20.3544 6.45621 20.44171 7.63891L20.44789 7.8095L20.44789 16.95234C20.44789 18.15737 19.51554 19.14446 18.33291 19.23177L18.16229 19.23806L5.97181 19.23806C4.7668 19.23806 3.77961 18.3056 3.69235 17.12297L3.68609 16.95234L3.68609 7.8095C3.68609 6.60451 4.61851 5.61731 5.80121 5.53006L5.97181 5.52378L18.16229 5.52378zM14.68914 7.34128C14.24057 7.07799 13.64914 7.33809 13.55577 7.86781L12.34663 12.40594C11.96057 12.05474 11.47371 11.80491 10.92165 11.70758C9.36766 11.43357 7.88577 12.4712 7.61177 14.02514C7.33776 15.5792 8.37538 17.06103 9.92936 17.33509L10.07949 17.35749C11.57771 17.5416 12.97406 16.52126 13.2392 15.01749L14.84069 9.35157L15.90011 10.14427L15.97429 10.19341C16.30411 10.38517 16.73257 10.30351 16.96663 9.99065C17.21863 9.65373 17.14994 9.17624 16.81303 8.92416L14.76251 7.39006L14.68914 7.34128z" fill="#61666Dff"></path><!--]--></svg>
          <span>热歌热榜</span>
        </div>

     
      </div>
    </div>
    </div>



</template>
<style scoped>
.header-channel-container{
  width:100vw;
  min-width: 1200px;
  max-width: 1600px;
  margin: 0 auto;
  height: 110px;
  display: flex;
  align-items: center;
  padding: auto;
  position: relative;

}
.header-channel{
  width:92%;
  height: 80%;
  margin: 0 auto;
  /* padding: 5px auto; */
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  /* border: 1px solid red; */
  /* min-width: 1280px; */
}
.channel-icons{
  display: flex;
  width: 13%;
  /* margin-left: 20px; */
  height: 100%;
  padding: 10px 2px;
  cursor: pointer;
  /* border: 1px solid red; */
}
.icon-box{
  display:flex;
  flex-direction: column;
  width: 50%;
  /* gap: 5px; */
  text-align: center;
  /*border: 1px solid red;*/
  font-size: 0.875em;
  font-weight: bold;
  color: black;
}
.icon-box a{
  width: 100%;
  height: 80%;
  /* border: 1px solid #F0EEEE; */
}
.icon-box img{
  width: 58%; 
  max-width: 80px; 
  min-width: 35px;
  height: auto; 
  border-radius: 50%; 
  margin: 3px 2px;
  /* border: 1px solid red; */
}
.nav-center{
  width:75%;
  min-width: 750px;
  height: 75%;
  padding: 0 13px;
  display: grid;
  align-content: center;
  grid-template-columns: repeat(11,minmax(70px,auto));
  grid-template-rows: repeat(2,minmax(30px,auto));
  column-gap: 8px;
  row-gap: 8px;
  /* position: relative; */
  overflow: hidden;
  /* border: 1px solid blue; */
}
.nav-center-item{
  display: flex;
  background-color: #f6f7f8;
  color: #61666D;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-size: 0.885em;
  white-space: nowrap;
  position: relative;
}

.nav-center-item:hover{
  background-color: lightgray;
  color: #333333;
  cursor: pointer
}
.nav-center-item .icon-arrow{
  position: absolute;
  right: 13px;
  top: 6px;
  font-weight: bold;
  transform: rotate(-90deg);
  transition: transform 0.2s;
}
.nav-center-item .icon-arrow:hover{
  transform: rotate(90deg);
}
.more-category-card{
  position: absolute;
  top: 100px;
  right: 320px;
  z-index: 200;
}
.nav-right{
  width: 20%;
  min-width: 130px;
  /* max-width: 50px; */
  height: 75%;
  display: grid;
  padding: 10px 2px;
  grid-template-rows: repeat(2,minmax(30px,1fr));
  grid-template-columns: repeat(3,minmax(10px,1fr));
  justify-content: center;
  align-content: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.875em;
  border-left: 1px solid #F0EEEE;
  /* border: 1px solid goldenrod; */

}
.nav-right-item{
  display: flex;
  /* min-width: 50px; */
  align-items: center;
  justify-content: center;
  gap:3px;
  color: #666666;
  border: 1px soild green;
}
.nav-right-item svg{
  width: 23px;
  height: 23px;
  /* border: 1px solid red; */
}
.nav-right-item:hover{
  color: deepskyblue;
  cursor: pointer;
}

@media only screen and (max-width: 1200px) {
  .nav-right-item svg{
    display:none;
  }
}

/* @media only screen and (max-width: 1200px) {
  .nav-center{
    grid-template-columns: repeat(9,minmax(70px,1fr));
  }
} */



</style>